/*
  学习目标：动态路由
  1. 在 path 使用 :id 的方式来配置动态的路由参数
  2. 通过 props.match.id 获取
  建议： 工作中较少使用，一般直接通过 props redux 等传递数据即可
*/

import React from 'react';
import {
  BrowserRouter as Router,
  Route,
  Switch,
  Link,
  Redirect,
} from 'react-router-dom';
import './index.css';

export default class App extends React.Component {
  render() {
    return (
      <div>
        <Test></Test>
        <Router>
          <Link to="/home">首页</Link>
          <br />
          <Link to="/my/123">我的音乐</Link>
          <br />
          <Link to="/friend">发现</Link>
          <br />
          <Switch>
            <Redirect from="/" to="/home" exact></Redirect>
            <Route path="/home" component={Home} exact></Route>
            <Route path="/my/:id" component={My}></Route>
            <Route path="/friend" component={Friend}></Route>

            {/* 404 一定是 通配，并且要写在最后面 */}
            <Route component={NotFount}></Route>
          </Switch>
        </Router>
      </div>
    );
  }
}

function Test(props) {
  console.log('Test- props -----> ', props);
  return <div>test</div>;
}
function NotFount() {
  return <div>我是NotFount组件-路径都匹配不上，就显示404吧</div>;
}
function Home(props) {
  return (
    <div>
      我是Home组件
      <button onClick={() => props.history.push('/my')}>
        点我push到my组件
      </button>
      <button onClick={() => props.history.replace('/friend')}>
        点我replace到Friend组件
      </button>
      <button onClick={() => props.history.go(-2)}>点我后退2</button>
      <button onClick={() => props.history.go(2)}>点我前进2</button>
    </div>
  );
}
function My(props) {
  console.log('my-props -----> ', props);
  console.log('props.match.params.id -----> ', props.match.params.id);
  return <div>我是My组件</div>;
}
function Friend() {
  return <div>我是Friend组件</div>;
}
